<template>
  <div class="bg">
    <div class="deliveryAddress">
      <div class="top">发货地</div>
      <div class="line"></div>
      <!-- <div class="title">交货地址</div> -->
      <button
        class="apply_btn"
        @click="editAddress(1)"
        v-if="addressData.length <= 0"
      >
        添加地址
      </button>

      <!-- 地址列表 -->
      <div class="apply_table">
        <div class="apply_table_column">
          <div
            class="apply_table_title"
            v-for="(item, index) in addressColumn"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <el-divider></el-divider>
        <div v-if="addressData.length > 0">
          <div
            class="apply_table_info"
            v-for="(item, index) in addressData"
            :key="index"
          >
            <div class="apply_info_box">
              <div class="apply_info_text">
                {{
                  item.supplierInformationProvince +
                  item.supplierInformationCity +
                  item.supplierInformationAddress
                }}
              </div>
              <div class="apply_info_tip" v-if="item.defaultShip !== 0">
                默认
              </div>
              <div class="apply_info_text">{{ item.abbreviation }}</div>
              <div class="apply_info_btn">
                <div>
                  <button class="btn_revise" @click="editAddress(0, index)">
                    编辑
                  </button>
                  <button @click="showDelDialog(index)" class="btn_del">
                    删除
                  </button>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </div>

        <!-- 无地址 -->
        <div class="noAddress" v-else>暂无地址信息</div>
      </div>

      <!-- 编辑按钮弹窗 -->
      <el-dialog
        :title="isAdd == 1 ? '新增地址' : '编辑地址'"
        :visible.sync="editDialog"
        width="5.71rem"
        center
        class="add_dialog"
      >
        <el-form ref="form">
          <el-form-item label="交货地" class="addressList">
            <el-cascader
              :options="addressList"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
              :value="provinceCity"
            ></el-cascader>
          </el-form-item>

          <el-form-item label="详细地址">
            <el-input
              v-model="form.supplierInformationAddress"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="简称地址">
            <el-input
              v-model="form.abbreviation"
              placeholder="请输入简称地址（非必填,限制字数为10个）"
              maxlength="10"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateAddress">保存</el-button>
        </span>
      </el-dialog>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="delDialog"
      width="5.71rem"
      center
      class="del_dialog button"
    >
      <span>是否删除此条信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">取消</el-button>
        <el-button type="primary" @click="deleteddress">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import regionJson from "@/json/region";
import bus from "../../utils/bus.js";
export default {
  created() {
    regionJson.shift();
    this.addressList = regionJson;
    this.getAddressList();
    console.log(this.addressList);
  },
  data() {
    return {
      addressList: [],
      addressColumn: ["详细地址", "简称地", "操作"],
      addressData: [
        {
          show: false,
        },
      ],
      delDialog: false,
      editDialog: false,
      form: {
        supplierInformationAddress: "",
        abbreviation: "",
      },
      province: "",
      city: "",
      provinceCity: [],
      isAdd: 1,
      delIndex: -1,
      show: false,
    };
  },
  methods: {
    // 获取入驻时的地址信息
    infoMassage() {
        this.$apiFun.getUserInfo().then(res => {
          this.form.supplierInformationAddress = res.result.supplierInformationAddress
          this.form.abbreviation = res.result.abbreviation
          console.log("res.result.supplierInformationProvince", res.result.supplierInformationProvince);
          let item1 = this.addressList.filter(
            (item) => item.label == res.result.supplierInformationProvince
          );
          console.log("aaa",item1[0].children);
          let item2 = item1[0].children.filter(
            (item) => item.label == res.result.supplierInformationCity
          );
          this.provinceCity = [item1[0].value, item2[0].value];        
          this.province = item1[0].label;
          this.city = item2[0].label;
          console.log("地址", this.provinceCity);
        })
        this.$forceUpdate()
    },
    showDelDialog(index) {
      this.delDialog = true;
      this.delIndex = index;
    },
    // 删除地址
    async deleteddress() {
      let id = this.addressData[this.delIndex].id;
      let res = await this.$apiFun.deleteddress({
        id,
      });
      if (res.code == 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: "删除成功",
        });
        this.getAddressList();
        this.delDialog = false;
      }
    },
    // 地址列表
    async getAddressList() {
      let res = await this.$apiFun.getAddressList();
      this.addressData = res.result.rows.map((row) => {
        return { ...row };
      });
      // console.log("this.addressData", this.addressData);
      if (this.addressData.length > 0) {
        let mainAddress = {
          province: this.addressData[0].supplierInformationProvince,
          city: this.addressData[0].supplierInformationCity,
          abbreviation: this.addressData[0].abbreviation,
        };
        sessionStorage.setItem("InfoAddress", JSON.stringify(mainAddress));

        bus.$emit(
          "updateDefaultProvince",
          this.addressData[0].supplierInformationProvince
        );
        bus.$emit(
          "updateDefaultCity",
          this.addressData[0].supplierInformationCity
        );
        bus.$emit(
          "updateDefaultAbbreviation",
          this.addressData[0].abbreviation
        );
      } else {
        sessionStorage.setItem("InfoAddress", "");
      }
    },
    // 选择交货地
    handleChange(value) {
      let item1 = this.addressList.filter((item) => item.value == value[0]);
      let item2 = item1[0].children.filter((item) => item.value == value[1]);
      this.province = item1[0].label;
      this.city = item2[0].label;
    },
    editAddress(type, index) {
      // 1 为新增 0为更新
      this.editDialog = true;
      this.isAdd = type;
      this.editIndex = index;
      if (this.isAdd == 0) {
        let detail = this.addressData[this.editIndex];
        console.log("detail", detail);
        
        this.form.supplierInformationAddress =
          detail.supplierInformationAddress;
        this.form.abbreviation = detail.abbreviation;
        let item1 = this.addressList.filter(
          (item) => item.label == detail.supplierInformationProvince
        );
        console.log("aaa",item1[0].children);
        let item2 = item1[0].children.filter(
          (item) => item.label == detail.supplierInformationCity
        );
        this.provinceCity = [item1[0].value, item2[0].value];        
        this.province = item1[0].label;
        this.city = item2[0].label;
        // console.log("this.province", this.province);
        // console.log("this.city", this.city);
      } else {
        this.infoMassage()
      }
    },
    // 新增和编辑
    async updateAddress() {
      // console.log(this.provinceCity[0],this.provinceCity[1]);
      if (this.province == "") {
        this.$message.error("请选择交货地");
      } else if (this.form.supplierInformationAddress == "") {
        this.$message.error("请输入详细地址");
      }
      // else if (this.form.abbreviation == "") {
      //   this.$message.error("请输入简称地址");
      // }
      else {
        let methods = {
          0: "updateAddress",
          1: "newAddress",
        };
        let params = {
          ...this.form,
          supplierInformationProvince: this.province,
          supplierInformationCity: this.city,
        };
        const method = methods[this.isAdd];

        if (this.isAdd == 0) {
          params.id = this.addressData[this.editIndex].id;
        }
        let res = await this.$apiFun[method](params);

        if (res.code == 200) {
          this.$message({
            duration: 1500,
            message: "操作成功",
            type: "success",
          });
        }
        this.editDialog = false;
        this.getAddressList();
      }
    },

    // showBtn(index) {
    //   this.addressData[index].show = true;
    // },
    // hideBtn(index) {
    //   this.addressData[index].show = false;
    // },
  },
  watch: {
    "$route.name": {
      handler() {
        // console.log("addressnewName", newName);
        this.getAddressList();
      },
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-divider--horizontal {
  margin: 0.1rem 0rem;
}
/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }

  .el-dialog__body {
    text-align: center;
    span {
      font-size: 0.2rem;
      font-weight: 400;
      color: #333333;
    }
  }

  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
        line-height: 0.1rem;
      }
      .el-button--primary {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}
.bg {
  height: auto;
  .deliveryAddress {
    // height: 390px;
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    text-align: left;
    padding: 0.3rem 0.5rem;
    font-family: Microsoft YaHei;
    .top {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
    }
    .line {
      height: 1px;
      background: #efefef;
      margin: 0.3rem 0;
    }
    // .title {
    //   font-size: 0.2rem;
    //   font-weight: bold;
    //   color: #333333;
    // }
    .apply_btn {
      margin-top: 0.3rem;
      width: 1.4rem;
      height: 0.4rem;
      padding: 0;
      background: #f42551;
      border-radius: 5px;
      border: none;
      font-size: 0.16rem;
      font-weight: bold;
      color: #ffffff;
      line-height: 0.4rem;
      cursor: pointer;
      display: block;
    }
    .apply_table {
      margin-top: 0.5rem;
      text-align: center;
      .apply_table_column {
        display: flex;
        .apply_table_title {
          // flex: 1;
          width: 3.3rem;
          margin-left: 0.35rem;
          font-size: 0.16rem;
          font-weight: bold;
          color: #333333;
          line-height: 0.3rem;
          &:first-child {
            width: 3rem;
            margin-left: 0;
          }
          &:last-child {
            margin-left: 0;
          }
        }
      }
      .apply_table_info {
        .apply_info_box {
          display: flex;
          position: relative;
          .apply_info_text {
            width: 3.3rem;
            // flex: 1;
            margin-left: 0.35rem;
            font-size: 0.16rem;
            font-weight: 400;
            color: #333333;
            line-height: 0.3rem;
            &:first-child {
              width: 3rem;
              margin-left: 0;
            }
          }
          .apply_info_btn {
            width: 3.3rem;

            div {
              width: 100%;
              height: 0.3rem;
              display: flex;
              justify-content: space-evenly;
              .btn_revise {
                background: none;
                border: none;
                font-size: 0.16rem;
                font-weight: bold;
                color: #333333;
                line-height: 0.3rem;
                cursor: pointer;
              }
              .btn_del {
                background: none;
                border: none;
                font-size: 0.16rem;
                font-weight: bold;
                color: #f42551;
                line-height: 0.3rem;
                cursor: pointer;
              }
            }
          }
          .apply_info_tip {
            position: absolute;
            left: 30%;
            font-size: 0.16rem;
            font-weight: bold;
            color: #f42551;
            line-height: 0.3rem;
          }
        }
      }
      .noAddress {
        font-size: 0.16rem;
        font-weight: 400;
        color: #999999;
        line-height: 0.3rem;
      }
    }

    // 编辑弹窗
    .add_dialog {
      /deep/.el-dialog__body {
        padding: 0.25rem 0.5rem 0rem;
        .el-form {
          .el-form-item {
            display: flex;
            .el-form-item__content {
              display: flex;
              flex: 1;
              justify-content: space-between;
            }
            .el-form-item__label {
              text-align: left;
              width: 0.9rem;
            }
            .el-select {
              width: 45%;
            }
          }
        }
      }
    }
  }
}

.addressList {
  width: 100%;
  /deep/ .el-form-item__content .el-cascader {
    width: 100%;
    // flex: none!important;
  }
}
.button /deep/ .el-button.el-button--default {
  width: 2rem;
}
</style>